<template>
    <div class="app-container">
        <el-form :model="formData" ref="formData" :rules="rules">
            <h1 style="text-align: center;">{{ formData.examName}} <span style="font-weight: normal; font-size: 25px;"></span></h1>
            <h3 style="text-align: center;">学科：{{ formData.subjectName}}</h3>
            <el-form-item label="考试时间" class="item-option" required>
                <el-date-picker style="margin-right: 30px;" value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <!-- 选择班级 -->
            <el-form-item label="所考班级" style="margin-left: 30%;" required>
                <el-select v-model="formData.classesIds" multiple filterable remote reserve-keyword
                    style="width: 45%;"
                    placeholder="请选择班级"
                    >
                    <el-option v-for="item in classesItems" :key="item.id" :value="item.id" :label="item.classesName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label=" 单选题：" class="item-option" >
                <el-input-number v-model="formData.singleNum" :min="0" :max="50" label="单选题"></el-input-number>
                <div class="score-option">
                    <label class="lbl">每题分数：</label>
                    <el-input-number v-model="formData.singleScore" :min="1" :max="100"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label=" 多选题：" class="item-option">
                <el-input-number v-model="formData.mutilNum" :min="0" :max="50" label="多选题"></el-input-number>
                <div class="score-option">
                    <label class="lbl">每题分数：</label>
                    <el-input-number v-model="formData.mutilScore" :min="1" :max="100"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label=" 判断题：" class="item-option">
                <el-input-number v-model="formData.judgeNum" :min="0" :max="50" label="判断题"></el-input-number>
                <div class="score-option">
                    <label class="lbl">每题分数：</label>
                    <el-input-number v-model="formData.judgeScore" :min="1" :max="100" ></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label=" 简答题：" class="item-option">
                <el-input-number v-model="formData.writtenNum" :min="0" :max="50" label="简答题"></el-input-number>
                <div class="score-option">
                    <label class="lbl">每题分数：</label>
                    <el-input-number v-model="formData.writtenScore" :min="1" :max="100"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="operations">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button type="plain" @click="close" style="margin-right: 50px; float: right;">关闭</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { autoGroup } from '@/api/exam/exam';
import {classesList} from '@/api/classes/classes'
export default {
    name:'AutoGroup',
    data(){
        return{
            formData:{
                id:null,
                examName:'',
                beginTime:null,
                endTime:null,
                subjectName:'',
                subjectId:null,
                generateType:0,
                singleNum:1,
                singleScore:1,
                mutilNum:1,
                mutilScore:1,
                judgeNum:1,
                judgeScore:1,
                writtenNum:1,
                writtenScore:5,
                //班级列表
                classesIds:[],
            },
            time:[],
            rules:{
                time:{required: true, message:'请选择开考时间',trigger:'blur'}
            },
            classesItems:[],
        }
    },
    mounted(){
        this.formData.examName = this.$route.params.examName;
        this.formData.generateType = this.$route.params.generateType;
        this.subNameAndId(this.$route.params.subject);
        this.getClassesList("_");
    },
    methods:{
        async getClassesList(val){
            let res = await classesList(val);
            this.classesItems = res.data;
        },
        // 拆分subjectId和subjectName
        subNameAndId(val){
            if(val){
                let index = val.indexOf('.');
                this.formData.subjectName = val.substring(index+1);
                this.formData.subjectId = val.substring(0,index);
            }
        },
        close(){
            this.$router.push('/exam/index');
        },
        submitForm(){
            if(this.time.length <= 0){
                this.$message.error("请选择开考时间");
                return;
            }
            if(this.formData.classesIds.length <= 0){
                    this.$message.error("请选择考试的班级");
                    return;
                }
            this.dateFormat();
            autoGroup(this.formData).then(resp=>{
                if(resp.code == 200){
                    this.$message.success(resp.message);
                    this.$router.push("/exam/index")
                }else{
                    this.$message.error(resp.message);
                }
            })
            console.log(this.formData);
        },
        dateFormat(){
            this.formData.beginTime = this.time[0];
            this.formData.endTime = this.time[1];
        },
    }
}
</script>

<style scoped>
    .operations{
        width: 400px;
        margin: 20px auto 0px;
    }
    .item-option{
        margin-left: 30%;
    }
    .score-option{
        display: inline-block;
        margin-left: 40px;
        color:rgb(111,115,116);
    }

    .lbl{
        margin-right: 15px;
    }
    
</style>